// var mySwiper = new Swiper('.swiper-container', {
//   loop: true,
//   navigation: {
//     prevEl: '.swiper-button-prev',
//     nextEl: '.swiper-button-next',
//   },
// })


//获取地址栏上的id
var getid = location.hash.split("=")[1] - 0;

// 发送请求 
$(document).ready(function () {
  $.ajax({
    url: '../../static/data/list.json'
  }).done(function (data) {
    // console.log(data)
    // console.log(getid)
    // 页面渲染 要用
    var str = ''
    data.list.forEach(function (item, index) {
      // console.log((item.list_id)-1)
      // console.log(item.list_id)
      if (getid === item.list_id) {
        // console.log(item)
        str +=
          `
          <div class="sm_img">
          <div class="focus"></div>
            <img src="${item.small_img}" alt="">
          </div>
          <div class="big_img">
            <img src="${item.small_img}" alt="">
          </div>

          <p class="details_title">${item.title}</p>
          <p class="details_jieshao">${item.jieshao}</p>
          <p class="details_jiege">${item.jiege}</p>
         `
      }
      $('.details').html(str)
    })
  })
})

// 划入效果 大图显示
$('.details').on('mouseover', $('.sm_img'), function () {
  $('.big_img').css('display', 'block')
})
// 滑出 大图隐藏
$('.details').on('mouseout', $('.sm_img'), function () {
  $('.big_img').css('display', 'none')
})
// 鼠标移动事件
$('.details').on('mousemove', $('.focus'), function (e = event) {
  // console.log($('.details').offset().top)
  var _top = (e.clientY - $('.details').offset().top) - 50
  var _left = (e.clientX - $('.details').offset().left) - 50
  // console.log(_top)
  if (_top < 0) {
    _top = 0
  }
  if (_top > 200) {
    _top = 200
  }
  if (_left < 0) {
    _left = 0
  }
  if (_left > 300) {
    _left = 300
  }
  $(".focus").css({ 'top': _top, 'left': _left })
  $(".big_img>img").css({ 'top': -(_top) * 3, 'left': -(_left) * 3 })
})

// 焦点划入显示
$('.details').on('mouseover', $('.focus'), function () {
  $('.focus').css('display', 'block')
})
// 焦点划出隐藏
$('.details').on('mouseout', $('.focus'), function () {
  $('.focus').css('display', 'none')
})